<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8" />
		<title></title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>

	<body>
		<h1>展示用户</h1>
		排序方式
		距离
		<select name="" id="">
			<option value="">500米内</option>
			<option value="">1公里内</option>
			<option value="">3公里内</option>
		</select>
		自定义距离
		<input type="text" />至<input type="text" />之间
		<div id="app">
			<table>
				<tr>
					<th>姓名</th>
					<th>地址</th>
					<th>财富值</th>
					<th>颜值</th>
					<th>魅力值</th>
				</tr>
				<tr v-for="item in items">
					<td>{{item.name}}</td>
					<td>{{item.address}}</td>
					<td>{{item.caifuzhi}}</td>
					<td>{{item.yanzhi}}</td>
					<td>{{item.meilizhi}}</td>
				</tr>
			</table>
		</div>
	</body>

	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				name: null,
				items: null
			},
			created: function () {
					this.show();
				},
			methods: {
				show: function() {
					self = this;
					axios.post('http://localhost:8088/user/show')
						.then(function(response) {
							self.items = response.data;
						})
						.catch(function(error) {
							console.log(error);
						});
				}
			}
		})
		
	</script>

</html>